<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>撩课学院</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/cssreset.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.0.0.js"></script>
    <script src="js/popper.js"></script>
    <script src="js/bootstrap.js"></script>
</head>

<body>
    <!-------------------------头部-begin----------------------->
    <header class="lk_header">
        <div class="header_top d-none d-sm-none d-md-none d-lg-block text-center text-muted">
            <div class="container">
                <div class="row">
                    <div class="top_bar1 col-md-2">
                        <a href="#" class="text-muted">
                            <i class="icon-phone"></i>
                            <span>关注微信号</span>
                            <div class="show_qd"></div>
                        </a>
                    </div>
                    <div class="top_bar2 col-md-5">
                        <i class="icon-tel"></i>
                        <span>188-8888-8888（服务时间：9:00-21:00）</span>
                    </div>
                    <div class="top_bar3 col-md-2">
                        <a href="#" class="text-muted">校企合作</a>
                        <a href="#" class="text-muted">培训师</a>
                    </div>
                    <div class="top_bar4 col-md-3">
                        <a href="#" class="btn btn-register btn-sm mr-2 mt-n1">免费注册</a>
                        <a href="#" class="text-muted">立即登录</a>
                    </div>
                </div>
            </div>
        </div>
        <nav class="navbar navbar-expand-lg navbar-light navbar_lk">
            <div class="container">
                <a href="#">
                    <h1 class="navbar-brand d-flex justify-content-center align-items-center mb-0">
                        <img src="images/lk_logo.png" alt="" width="130px">
                    </h1>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_lk_hide"
                    aria-controls="navbar_lk_hide" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbar_lk_hide">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item dropdown active">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                学科学习
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Web前端+全栈</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Python+人工智能</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">JavaEE+大数据</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">服务体系</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">软件工具</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">专题学习</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">就业指导</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <!-------------------------头部-end----------------------->

    <!-------------------------轮播图-begin----------------------->
    <section id="lk_carouse" class="lk_carouse carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#lk_carouse" data-slide-to="0" class="active"></li>
            <li data-target="#lk_carouse" data-slide-to="1"></li>
            <li data-target="#lk_carouse" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active" data-sm-img="images//slide_01_900x410.jpg"
                data-lg-img="images//slide_01_2000x410.jpg"></div>
            <div class="carousel-item" data-sm-img="images//slide_02_900x410.jpg"
                data-lg-img="images//slide_02_2000x410.jpg"></div>
            <div class="carousel-item" data-sm-img="images//slide_03_900x410.jpg"
                data-lg-img="images//slide_03_2000x410.jpg"></div>
        </div>
        <a class="carousel-control-prev" href="#lk_carouse" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#lk_carouse" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </section>
    <!-------------------------轮播图-end----------------------->

    <!-------------------------热门课程-begin----------------------->
    <section class="lk_hot mt-5">
        <div class="text-center mt-3 mb-3">
            <h3><strong>热门课程</strong></h3>
            <img src="images/star.png" alt="">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-4">
                    <div class="media align-self-center bg-light mb-4 p-2">
                        <img src="images/yjh.png" class="mr-3 rounded-circle img-thumbnail img-fluid" alt="..."
                            width="100px">
                        <div class="media-body">
                            <h6 class="mt-0">
                                <span class="text-warning">【新】</span>
                                Python项目实战-PYQT5
                            </h6>
                            <p class="text-muted">368个课时打造最全QT</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="media align-self-center bg-light mb-4 p-2">
                        <img src="images/yjh.png" class="mr-3 rounded-circle img-thumbnail img-fluid" alt="..."
                            width="100px">
                        <div class="media-body">
                            <h6 class="mt-0">
                                <span class="text-danger">【热】</span>
                                H5+C3从入门到贯通
                            </h6>
                            <p class="text-muted">8大案例全程驱动教学</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="media align-self-center bg-light mb-4 p-2">
                        <img src="images/yjh.png" class="mr-3 rounded-circle img-thumbnail img-fluid" alt="..."
                            width="100px">
                        <div class="media-body">
                            <h6 class="mt-0">
                                <span class="text-info">【战】</span>
                                JavaEE-SSH三大框架
                            </h6>
                            <p class="text-muted">就业实战第一篇</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="media align-self-center bg-light mb-4 p-2">
                        <img src="images/yjh.png" class="mr-3 rounded-circle img-thumbnail img-fluid" alt="..."
                            width="100px">
                        <div class="media-body">
                            <h6 class="mt-0">
                                <span class="text-info">【战】</span>
                                Vue+Node拼多多项目实战
                            </h6>
                            <p class="text-muted">打通前后端, 联通数据库</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="media align-self-center bg-light mb-4 p-2">
                        <img src="images/yjh.png" class="mr-3 rounded-circle img-thumbnail img-fluid" alt="..."
                            width="100px">
                        <div class="media-body">
                            <h6 class="mt-0">
                                <span class="text-danger">【火】</span>
                                JavaEE-SSH综合项目应用
                            </h6>
                            <p class="text-muted">博客系统前后端统一部署</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="media align-self-center bg-light mb-4 p-2">
                        <img src="images/yjh.png" class="mr-3 rounded-circle img-thumbnail img-fluid" alt="..."
                            width="100px">
                        <div class="media-body">
                            <h6 class="mt-0">
                                <span class="text-danger">【热】</span>
                                JavaScript高级+设计模式
                            </h6>
                            <p class="text-muted">原型链、设计模式、面向对象</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!-------------------------热门课程-end----------------------->

    <!-------------------------产品中心-begin----------------------->
    <section class="lk_product pb-3">
        <div class="container">
            <!-- 设置滚动条 -->
            <div class="pr_scroll">
                <ul class="nav nav-pills mb-3 border-bottom" style="width: 1008px;" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="pills-college-tab" data-toggle="pill" href="#pills-college"
                            role="tab" aria-controls="pills-college" aria-selected="true">在线大学</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-vip-tab" data-toggle="pill" href="#pills-vip" role="tab"
                            aria-controls="pills-vip" aria-selected="false">会员专享</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-video-tab" data-toggle="pill" href="#pills-video" role="tab"
                            aria-controls="pills-video" aria-selected="false">优质视频</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-outline-tab" data-toggle="pill" href="#pills-outline" role="tab"
                            aria-controls="pills-outline" aria-selected="false">线下沙龙</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-class-tab" data-toggle="pill" href="#pills-class" role="tab"
                            aria-controls="pills-class" aria-selected="false">精品课程</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-booklet-tab" data-toggle="pill" href="#pills-booklet" role="tab"
                            aria-controls="pills-booklet" aria-selected="false">撩课小册</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-book-tab" data-toggle="pill" href="#pills-book" role="tab"
                            aria-controls="pills-book" aria-selected="false">面试宝典</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-read-tab" data-toggle="pill" href="#pills-read" role="tab"
                            aria-controls="pills-read" aria-selected="false">小撩阅读</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-benefit-tab" data-toggle="pill" href="#pills-benefit" role="tab"
                            aria-controls="pills-benefit" aria-selected="false">小撩公益</a>
                    </li>
                </ul>
            </div>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-college" role="tabpanel"
                    aria-labelledby="pills-college-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-8 col-sm-12 text-center text-md-left">
                                <img src="images/ewm_lk.jpg" alt="" width="150px" class="mt-4">
                                <p class="text-muted ml-2">更多资讯欢迎<br>关注撩课学院</p>
                                <p class="college_txt1 pl-4">HTML5+全栈 / Python+人工智能 / JavaEE+大数据</p>
                                <h3 class="lk_college_h3 mb-3"><strong>欢迎来到IT人的在线大学 <span class="text-danger">/</span>
                                        撩课学院 <span class="text-danger">/ </span></strong></h3>
                                <button class="btn btn-primary btn-lg" type="submit">课程咨询</button>
                                <button class="btn btn-lg" type="submit">了解更多</button>
                            </div>
                            <div class="col-md-4 col-sm-0 d-none d-sm-none d-md-block">
                                <img src="images/iphoneX.png" alt="" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-vip" role="tabpanel" aria-labelledby="pills-vip-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-4 col-sm-0 d-none d-sm-none d-md-block">
                                <img src="images/iphoneX2.png" alt="" class="img-fluid">
                            </div>
                            <div class="col-md-8 col-sm-12 text-center text-md-left">
                                <h3 class="lk_vip_h3 text-warning mt-5">撩课学院会员</h3>
                                <p class="text-break font-weight-light lk_vip_p">汇聚名师,
                                    为你呈现前端、后端、移动端、大数据、人工智能等从零基础到项目实战连载课程内容。专属的会员社群和私人订制服务, 1年365天持续更新课程紧跟前沿技术!</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-video" role="tabpanel" aria-labelledby="pills-video-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 col-sm-12 text-center text-md-left">
                                <h3 class="lk_college_h3 mb-3 mt-5 text-danger"><strong>案例驱动·体系贯穿·全面系统</strong></h3>
                                <h4 class="lk_video_h4">10-15分钟的视频 <span class="text-warning">知识点拆分讲解</span></h4>
                                <p class="lk_video_p text-muted">玩转HTML5+全栈系列<br>玩转Python+人工智能系列<br>玩转JavaEE+大数据系列</p>
                                <button class="btn btn-success btn-lg" type="submit">立即学习</button>
                            </div>
                            <div class="col-md-6 col-sm-0 d-none d-sm-none d-md-block d-lg-block">
                                <img src="images/macBook.png" alt="" width="500px" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-outline" role="tabpanel" aria-labelledby="pills-outline-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-8 col-sm-12 text-center text-md-left">
                                <img src="images/ewm_lk.jpg" alt="" width="150px" class="mt-4">
                                <p class="text-muted ml-2">更多资讯欢迎<br>关注撩课学院</p>
                                <p class="college_txt1 pl-4">HTML5+全栈 / Python+人工智能 / JavaEE+大数据</p>
                                <h3 class="lk_college_h3 mb-3"><strong>欢迎来到IT人的在线大学 <span class="text-danger">/</span>
                                        撩课学院 <span class="text-danger">/ </span></strong></h3>
                                <button class="btn btn-primary btn-lg" type="submit">课程咨询</button>
                                <button class="btn btn-lg" type="submit">了解更多</button>
                            </div>
                            <div class="col-md-4 col-sm-0 d-none d-sm-none d-md-block d-lg-block">
                                <img src="images/iphoneX.png" alt="" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-class" role="tabpanel" aria-labelledby="pills-class-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-4 col-sm-0 d-none d-sm-none d-md-block d-lg-block">
                                <img src="images/iphoneX2.png" alt="" class="img-fluid">
                            </div>
                            <div class="col-md-8 col-sm-12 text-center text-md-left">
                                <h3 class="lk_vip_h3 text-warning mt-5">撩课学院会员</h3>
                                <p class="text-break font-weight-light lk_vip_p">汇聚名师,
                                    为你呈现前端、后端、移动端、大数据、人工智能等从零基础到项目实战连载课程内容。专属的会员社群和私人订制服务, 1年365天持续更新课程紧跟前沿技术!</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-------------------------产品中心-end----------------------->

    <!-------------------------关于我们-begin----------------------->
    <section class="lk_about mt-5">
        <div class="text-center mt-3 mb-3">
            <h3><strong>关于我们</strong></h3>
            <img src="images/star.png" alt="">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 text-muted order-1 order-lg-0">
                    <p class="mb-3 mt-3 mt-lg-0">撩课学院（itlike
                        .com）起源于一个资深的教育团队所发起的一个公益项目。从2017年开始，通过各大在线平台(网易、腾讯等)，向全国免费开放他们精心打磨的视频课程 “H5系列” 、 “Python系列” 、
                        “Java系列” 等。</p>
                    <p class="mb-3">在短短不到一年的时间， 接近10万多名学生报名参加学习了这些课程, 好评如潮。为了有组织的推出更加全面、优质、成体系的课程，撩课学院应运而生。</p>
                    <p class="mb-3">撩课学院课程体系完善，包含HTML5+全栈开发、Python+人工智能、JavaEE、Go语言+区块链、UI/UE设计、新媒体、电商运营等系列课程。</p>
                </div>
                <div class="col-lg-4 order-0 order-lg-1">
                    <img src="images/team.jpg" alt="" class="img-fluid img-thumbnail">
                </div>
            </div>
        </div>
    </section>
    <!-------------------------关于我们-end----------------------->

    <!-------------------------友情链接-begin----------------------->
    <section class="lk_link d-none d-md-none d-lg-block mb-5 mt-5">
        <div class="text-center mt-3 mb-3">
            <h3><strong>友情链接</strong></h3>
            <img src="images/star.png" alt="">
        </div>
        .<div class="container">
            <div class="row d-flex justify-content-around align-items-center">
                <a href=""><img src="images/ibm-logo.png" width="100" alt=""></a>
                <a href=""><img src="images/facebook-logo.png" width="50" alt=""></a>
                <a href=""><img src="images/google-logo.png" width="50" alt=""></a>
                <a href=""><img src="images/airbnb-logo.png" width="100" alt=""></a>
                <a href=""><img src="images/swift-logo.png" width="50" alt=""></a>
                <a href=""><img src="images/paypal-logo.png" width="100" alt=""></a>
                <a href=""><img src="images/walmart-logo.png" width="100" alt=""></a>
                <a href=""><img src="images/airbnb-logo.png" width="100" alt=""></a>
                <a href=""><img src="images/swift-logo.png" width="50" alt=""></a>
            </div>
        </div>
    </section>
    <!-------------------------友情链接-end----------------------->

    <!-------------------------底部-begin----------------------->
    <footer class="lk_footer">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-4 d-none d-md-none d-lg-block">
                    <div class="row align-items-center footer_txt">
                        <ul class="offset-2 col-4">
                            <li><a href="#">关于我们</a></li>
                            <li><a href="#">课程介绍</a></li>
                            <li><a href="#">热门课程</a></li>
                        </ul>
                        <ul class="col-4">
                            <li><a href="#">名师授课</a></li>
                            <li><a href="#">课堂互动</a></li>
                            <li><a href="#">联系我们</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 text-center">
                    <p>公司地址: 上海市松江区松江大学城</p>
                    <p>联系电话: 88888888</p>
                    <p>地址邮箱: admin@itlike.com</p>
                </div>
                <div class="col-lg-3 col-md-5 offset-1 d-none d-sm-none d-md-block ft_img">
                    <p>联系我们</p>
                    <img src="images/weixin-h.png" alt="" class="mr-2" width="50px" data-toggle="tooltip"
                        data-placement="bottom" title="添加微信">
                    <img src="images/xinlang-h.png" alt="" width="50px" data-toggle="tooltip" data-placement="bottom"
                        title="微博搜索">
                </div>
            </div>
        </div>
    </footer>
    <!-------------------------底部-end----------------------->



    <script src="js/index.js"></script>
</body>

</html>